<template>
    <view class="address-container">
		<view class="back-to-home" @click="navigateToIndex">
		  <uni-icons type="back" size="24"></uni-icons> 返回首页
		</view>
		
		    <view class="add-button" @click="addNewAddress">
		        新增
		    </view>
        <view class="address-item" v-for="address in addressList" :key="address.addressid"  @click="goConfirmOrder(item)">
            <view class="address-text">
                <text class="address-province">{{ address.province }}{{ address.city }}{{ address.town }}</text>
                <text class="address-detail">{{ address.address }}</text>
                <text class="address-name-phone">{{ address.name }} {{ address.phone }} </text>
				   <text v-if="address.isDefault === 1" style="color: red;">默认</text>
            </view>
            <view class="address-icons">
                 <uni-icons type="gear-filled" size="30" @click="editAddress(address.addressid)"></uni-icons>        
			</view>
			
        </view>
			    
    </view>

</template>

<script>
	import {mapState} from 'vuex'
	import config from '@/config'
	export default{
		data(){
			return{
				isSelectedPath:false,
				addressList: []  // 存储从后端获取的地址数据
			}
		},
		mounted() {
		    this.fetchAddressData();
		},
		computed: {  
		        ...mapState({
					list:state=>state.path.list
				})  
		    },  
		onLoad(e){
			if(e.type==='selectedPath'){
				this.isSelectedPath = true;//从订单过来的
			}
		},
		methods:{
			fetchAddressData() {
			    // 使用 uni.request 获取后端数据
			    uni.request({
			        url: config.apiUrl + '/address/getaddress',
			        method: 'GET',
			        success: (response) => {
			            this.addressList = response.data; // 将后端返回的地址数据存储到 addressList 中
						
			        },
			        fail: (error) => {
			            console.error('Error fetching address data:', error);
			        }
			    });
			},
			//新增地址
			goAddPath(){
				uni.navigateTo({
					url:'/pages/mine/address/addaddress'
				})
			},
			//修改地址
			toAddPath(index){
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:"../pages/my-add-path?data="+pathObj+""
				})
			},
			goConfirmOrder(item){
				//如果从确认订单过来的
				if(this.isSelectedPath){
					//自定义事件：页面通讯
					uni.$emit('selectPathItem',item)
					//返回上一页
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style scoped>
    .address-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 10px;
        background-color: #ffefba;
        border-bottom: 1px solid #ccc;
        height: 550px;
    }

    .address-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* 内容顶部对齐 */
        margin-top: 20px;
        background-color: aliceblue;
        border-radius: 18px;
        padding: 10px;
        font-size: 12px;
    }

    .address-text {
        display: flex;
        flex-direction: column; /* 设置子元素垂直排列 */
        justify-content: flex-start; /* 内容顶部对齐 */
    }

    .address-icons {
        display: flex;
        flex-direction: row; /* 默认是水平布局 */
    }

    .address-province {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .address-detail {
        margin-bottom: 5px;
    }

    .address-name-phone {
        margin-bottom: 10px;
    }

    .add-button {
        margin-left: auto; /* 将新增按钮推到最右侧 */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer; /* 添加指针样式 */
        background-color: #007bff;
        color: white;
    }

    .back-to-home {
        margin-bottom: 10px;
    }

    .back-to-home uni-icons {
        margin-right: 5px;
    }
</style>